<template>
	<com-popup :duration="200" direction="bottom" :visible="visibleSync" @hide="hide">
		<view class="com-action-sheet y-flex"
		:style="{
			'background-color': bgColor,
			'border-top-left-radius': _pixelunit(radius),
			'border-top-right-radius': _pixelunit(radius)
		}">
			<text class="com-action-sheet-title text-align-center pt-40 pb-40 pl-30 pr-30 fs-32"
			:style="{
				color: titleColor,
				'border-color': borderColor
			}"
			v-if="title">{{title}}</text>
			<scroll-view scroll-y="true" :style="{height: data.length > 6 ? '600rpx' : ''}">
				<view :style="{'border-bottom-color': borderColor}"
				class="com-action-sheet-item y-row y-align-center y-justify-center"
				v-for="(item, index) in itemList"
				:key="index"
				@tap="handleConfirm(index)">
					<text
					class="fs-32 text-align-center y-flex-1 pl-20 pr-20"
					:style="{
						'color': item.checked ? checkedColor : item.color,
						'opacity': item.disabled ? 0.3 : 1
						
					}">{{item.label}}</text>
				</view>
			</scroll-view>
			<text
			v-if="cancelShow"
			class="com-action-sheet-cancel text-align-center pt-40 pb-40 fs-32"
			:style="{
				'border-bottom-color': borderColor,
				'color': cancelColor
			}" @tap="handleCancel">{{cancelText}}</text>
		</view>
		<com-safe-bottom></com-safe-bottom>
	</com-popup>
</template>

<script>
	import { pixelunit } from '@/assets/js/util.js'
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			data: {
				type: Array,
				default () {
					return new Array
				}
			},
			title: {
				type: String,
				default: ''
			},
			radius: {
				type: [String, Number],
				default: 20
			},
			titleColor: {
				type: String,
				default: '#333'
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			borderColor: {
				type: String,
				default: '#eee'
			},
			textColor: {
				type: String,
				default: '#666'
			},
			checkedColor: {
				type: String,
				default: '#FF3B30'
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			cancelShow: {
				type: Boolean,
				default: false
			},
			cancelColor: {
				type: String,
				default: '#333'
			}
		},
		computed: {
			itemList () {
				return this.data.map(item => {
					return Object.assign({}, {
						label: '',
						value: '',
						color: this.textColor,
						checked: false,
						disabled: false
					}, typeof item == 'string' ? {label: item} : item)
				})
			}
		},
		data () {
			return {
				visibleSync: false
			}
		},
		created() {
			this.visibleSync = this.visible
		},
		methods: {
			_pixelunit (size) {
				return pixelunit(size)
			},
			handleConfirm (index) {
				if ( this.itemList[index].disabled ) return
				this.visibleSync = false
				this.$emit('confirm', {
					current: index,
					detail: this.itemList[index]
				})
			},
			handleCancel () {
				this.visibleSync = false
				this.$emit('cancel')
			},
			hide () {
				this.visibleSync = false
				this.$emit('hide')
				this.$emit('update:visible', false)
			}
		},
		watch: {
			visible (newVal) {
				this.visibleSync = newVal
			}
		}
	}
</script>

<style>
	.com-action-sheet-title {
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}
	.com-action-sheet-item {
		border-bottom-width: 1px;
		border-bottom-style: solid;
		height: 100rpx;
	}
	.com-action-sheet-cancel {
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}
</style>
